<!doctype html>
<html lang="zh-Hans-CN">

<head>
    <title>拖拽</title>
    <meta charset="utf-8">
    <meta name="keywords" content="拖拽">
    <meta name="description" content="拖拽">
    <meta name="author" content="chen">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
    <!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
    <link rel="stylesheet" type="text/css" media="screen" href="">
    <script defer="defer" src=""></script>
    <style>
        /*@import url("css/name.css") screen and ( min-width: 1200px );*/
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #box {
            width: 250px;
            min-height: 100px;
            background-color: gray;
            text-align: center;
        }
        span#text {
            color: white;
            background-color: green;
            font-size: 24px;
        }
        p {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <main id="box">
        <span id="text">请将图片拖放到此处</span>
    </main>
    <script>
            let oBox = document.querySelector("#box");
            let oText = document.querySelector("#text");
            console.log(oBox);
            oBox.ondragenter = function(e) {
                oText.innerText = "请松开鼠标已释放";
            }
            oBox.ondragover = function(e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
            oBox.ondragleave = function(e) {
                oText.innerText = "请将图片拖放到此处";
            }
            oBox.ondrop = function(e) {
                const dt = e.dataTransfer;
                let oFile = dt.files[0];

                let filename = oFile.name;
                console.log("文件名: ",filename);
                let filesize = oFile.size + "字节";
                console.log("文件大小: ",filesize);
                let filetype = oFile.type;
                console.log("文件类型: ",filetype);
                

                let blob = new Blob([oFile]);
                let url = window.URL.createObjectURL(blob);
                let img = new Image();
                img.style.display = "block";
                img.style.margin = "auto";
                img.width = 192;
                img.src = url;
                img.onload = function(e) {
                    oBox.appendChild(this);
                    let oName = document.createElement("p");
                    let oNameNode = document.createTextNode("文件名: "+filename);
                    oName.appendChild(oNameNode);
                    let oSize = document.createElement("p");
                    let oSizeNode = document.createTextNode("文件大小: "+filesize);
                    oSize.appendChild(oSizeNode);
                    let oType = document.createElement("p");
                    let oTypeNode = document.createTextNode("文件类型: "+filetype);
                    oType.appendChild(oTypeNode);
                    oBox.appendChild(oName);
                    oBox.appendChild(oSize);
                    oBox.appendChild(oType);
                }
        
        
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        </script>
</body>

</html>